<template>
<div class="videos-lists"> 
  <v-loading v-if="loadingStatus"></v-loading>
  <template v-if="data.list.length > 0">
       <div class="video-item" v-for="(item, index) in data.list">
        <div class="vieo-img-box" @mouseenter="mouseoverVideo(item)" @mouseleave="mouseoutVideo(item)">
          <video width="100%" :src="item.src" :poster="item.poster" autoplay="autoplay" loop muted v-if="payrid == item.rid"></video>
          <img :src="item.poster" width="100%" v-else />
        </div>
       </div>
       <div class="cl"></div>
       <div class="dis30"></div>           
  </template>
  <template v-else>
      <div class="tc" v-if="!loadingStatus">
        <div class="dis30"></div>
        <p class="f14 font-gray2">
          未找到相关视频数据 
          <i class="el-icon-chat-dot-round f24"></i>
        </p>
        <div class="dis30"></div>
        <div class="dis30"></div>
      </div>
  </template>
</div>
</template>
<script>
  export default {
    props: ["params"],
    data() {
      return {
        filter: {
          search_type: "",
          keyword: "",
          orderby: "",
          page: 1,
          pagesize: 20
        },
        data: {
          totalpage: 0,
          total: 0,
          count: {},
          list: []
        },
        payrid: 0,
        loadingStatus: false
      }
    },
    watch: {
      params: {
        handler(newValue, oldValue) {
          this.fetchData();
        },
        deep: true
      }
    },
    mounted () {
      this.fetchData()
    },
    methods: {
      getData() {
        return this.data;
      },
      mouseoverVideo (item) {
        this.payrid = item.rid
      },
      mouseoutVideo (item) {
        this.payrid = 0
      },
      fetchData(page) {
        let that = this;
        let params = {};
        if (this.params) {
          for (let p in this.params) {
            if (this.params[p]) {
              params[p] = this.params[p];
            }
          }
        }
        for (let p in this.filter) {
          if (this.filter[p]) {
            params[p] = this.filter[p];
          }
        }
        this.loadingStatus = true;
        this.$api.get('web.resources.get_list', params).then(
          res => {
            if (res.status === 1) {
              this.data = res.data;
            }
            this.loadingStatus = false;
          },
          () => {
            this.loadingStatus = false;
          }
        );
      },
      search() {
        this.filter.page = 1;
        this.fetchData();
      },
      setFilter(field, val, reload = true) {
        this.filter[field] = val;
        if (reload) {
          this.fetchData();
        }
      },
      setOrderby (field) {
        let s = "|"
        let f = (this.filter.orderby || s).split(s)
        f[0] = field
        f[1] = (f[1] && f[1] === 'desc') ? 'asc' : 'desc'
        this.setFilter('orderby', f.join(s))
      },
      pageChange(val) {
        this.setFilter("page", val);
      },
      pageSizeChang(val) {
        this.setFilter("page", 1, false);
        this.setFilter("pagesize", val);
      }
    }
  }
</script>
<style lang="scss">
.videos-lists { min-height: 300px; position:relative;}
.videos-lists .video-item {float:left;margin:0 15px 15px 0; width: 32%;overflow:hidden;}
.videos-lists .video-item .vieo-img-box {min-height:250px;overflow:hidden;}
</style>
